<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>重置登录密码</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/rp_head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/to_style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/rp_foot.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/phone_check.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/password_tips.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css">
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 头部 start-->
<jsp:include page="/public_page/rp_head.jsp"></jsp:include>
<!-- 头部 end-->

<!-- 身体 start-->

<div class="container">
    <div class="content">

        <!-- CMS:会员中心cms/console/scene.vm开始:console/scene.vm -->
        <!-- CMS:会员中心cms/console/scene.vm开始:console/scene.vm -->
        <c:if test="${empty sessionScope.fpUser}" var="userEmpty">
            <!-- 用户session超时展示 start-->
            <jsp:include page="/public_page/time_out.jsp"></jsp:include>
            <!-- 用户session超时展示 end-->
        </c:if>


        <%--        如果不为空--%>
        <c:if test="${!userEmpty}">
        <div class="maincenter">

            <ol class="ui-iconfontstep ui-iconfontstep-3">
                <li class="ui-iconfontstep-start">
                    <em><i class="iconfont icon-lingxing" title="菱形"></i><strong></strong><i class="ui-iconfontstep-stepNum">1</i></em>
                    <span>验证身份</span>
                </li>
                <li class="ui-iconfontstep-press ui-iconfontstep-active">
                    <em><i class="iconfont icon-lingxing" title="菱形"></i><strong></strong><i class="ui-iconfontstep-stepNum">2</i></em>
                    <span>重置登录密码</span>
                </li>
                <li class="ui-iconfontstep-end " style="padding-right: 0;">
                    <em><i class="iconfont icon-lingxing" title="菱形"></i><i class="iconfont icon-zhengque ui-iconfontstep-stepNumEnd" title="成功"></i></em>
                    <span>重置成功</span>
                </li>
            </ol>
            <div class="maincenter-box">
                <div class="maincenter-box-tip">
                    <a href="${pageContext.request.contextPath}/user/reset_password.htm" class="fn-right">重新选择验证方式</a>
                    <p class="ui-tiptext ui-tiptext-message">
                        <span class="ui-tiptext-icon"></span>您正在使用 “<span class="strong">
                        <c:if test="${sessionScope.type == 'phone'}" var="type">
                        手机验证
                        </c:if>
                        <c:if test="${!type}">
                            邮箱验证
                        </c:if>
                    </span>” 进行校验。
                    </p>
                </div>

                <div class="ui-container" style="font: 12px/1.5 tahoma,arial,Hiragino Sans GB,\\5B8B体;">
                    <div class="ui-tip-summary ui-tip ui-tip-info" id="J_signIntroWrapper">
                        <span id="signIntroMain"><i class="iconfont icon-tixing" style="color: #00BFFF; font-size: 13px"></i> 您正在填写您的新密码</span>
                    </div>
                    <form class="ui-form" id="fill-password" action="/login/update_password.htm" method="post">
                        <fieldset id="signFromContainer">
                            <div class="item item-normal">
                                <c:if test="${type}">
                                <label>手机号码</label>
                                <span>${sessionScope.fpUser.phone}</span>
                                    <input type="hidden" name="value" value="${sessionScope.fpUser.phone}">
                                </c:if>
                                <c:if test="${!type}">
                                <label>邮箱</label>
                                <span>${sessionScope.fpUser.email}</span>
                                    <input type="hidden" name="value" value="${sessionScope.fpUser.email}">
                                </c:if>
                            </div>
                            <div class="item item-normal">
                                <label>新密码</label>
                                <input id="password" name="password" type="text" style="width: 242px;">
                                <div id="error-message" style="display: none"><i class="iconfont icon-round-yes" id="msg-icon"></i> <b id="msg-text">验证码已发送至你的手机，请查收</b></div>
                            </div>
                            <div class="ts-tip" style="position: absolute; left: 455px; top: 86px; display: none; font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', \5b8b\4f53, sans-serif; z-index: 9999">
                                <i class="ts-tip-ic"></i>
                                <div class="ts-tip-bd">
                                    <div class="ts-strength">
                                        <span>强度</span>
                                        <div class="ts-strength-bar">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <em style="position: relative;top: 7px;left: 5px;"></em>
                                        </div>
                                    </div>
                                    <div class="ts-rule">
                                        <div class="ts-rule-item ts-rule-length">
                                            <i class="ordinary-icon"></i>
                                            <span>6~20个字符</span>
                                        </div>
                                        <div class="ts-rule-item ts-rule-legal">
                                            <i class="ordinary-icon"></i>
                                            <span>只能包含字母、数字以及标点符号（除空格）</span>
                                        </div>
                                        <div class="ts-rule-item ts-rule-multi">
                                            <i class="ordinary-icon ts-rule-multi"></i>
                                            <span>字母、数字和标点符号至少包含2种</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item item-normal">
                                <label>再次输入密码</label>
                                <input id="two-password" name="two-password" type="text" style="width: 242px;">
                                <div id="error2-message" style="display: none"><i class="iconfont icon-round-yes" id="msg2-icon"></i> <b id="msg2-text">验证码已发送至你的手机，请查收</b></div>
                            </div>
                            <div class="item item-action">
                                <button class="ui-btn ui-btn-action first-elem">确定</button>
                            </div>
                        </fieldset>
                    </form>
                </div>

            </div>
        </div>
        </c:if>
    </div>
</div>

<!-- 身体 end-->
<!-- 尾部 start-->

<jsp:include page="/public_page/rp_foot.html"></jsp:include>

<!-- 尾部 end-->
</body>
<script>
    // 密码格式      密码重复
    var ck1 = false,ck2 = false
    $(function () {
        $("#password").focus(function () {
            $(".ts-tip").show();
        }).blur(function () {
            $('.ts-tip').css('display','none');
            var pwdVal = $(this).val();
            // 密码长度合格
            var length = pwdVal.length>5 && pwdVal.length<21;
            // 密码内容合格
            var pwd = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/.test(pwdVal);
            // 如果密码长度没有6并且没由字符组成
            if(!pwd){
                $(this).css('border', '1px solid red');
                $("#error-message").show();
                $("#msg-text").text("密码设置不符合要求").css("color","red");
                $("#msg-icon").removeClass("icon-round-yes").addClass("icon-round-error").css("color","red");
                ck1 = false;
            } else{
                // 密码合格
                $("#error-message").hide();
                $(this).css('border','1px solid #dedede');
                ck1 = true;
            }
        }).keyup(function () {
            // 获取密码内容
            var pwdVal = $(this).val();
            // 获取再次输入密码内容，在这里也需要判断！
            var pwd2Val = $("#two-password").val();
            if(pwdVal != pwd2Val){
                ck2 = false;
                $("#error2-message").show();
                $("#msg2-text").text("两次输入的密码不一致！").css('color','red');
                $("#msg2-icon").removeClass("icon-round-yes").addClass("icon-round-error").css("color","red");
            } else{
                ck2 = true;
                $("#error2-message").text("").hide();
                $(this).css('border','1px solid #dedede');
            }
            // 如果没输入
            if(null == pwdVal || '' == pwdVal){
                $('.ts-rule-length i').text('').removeClass().addClass('ordinary-icon');
                $('.ts-rule-legal i').text('').removeClass().addClass('ordinary-icon');
                $('.ts-rule-multi i').text('').removeClass().addClass('ordinary-icon');
                // 密码强度改变
                $('.ts-strength-bar span').css('background','#DCDCDC');
                $('.ts-strength-bar em').text('');

                $(this).css('border', '1px solid red');
                $('#pwd-error').css('display','inline-block')
                $('#pwd-error i:first').addClass('children_icon1');
            } else{
                // 数字判断值
                var length = pwdVal.length>5 && pwdVal.length<21;
                if(length){
                    $('.ts-rule-length i').html('&#10004').removeClass('small-error-icon');
                } else{
                    $('.ts-rule-length i').html('&#10006').removeClass('ordinary-icon');
                }
                // 除空格判断值
                var blank = pwdVal.indexOf(' ')==-1 && pwdVal.length>0;
                if(blank){
                    $('.ts-rule-legal i').html('&#10004').removeClass('ordinary-icon');
                } else{
                    $('.ts-rule-legal i').html('&#10006').removeClass('ordinary-icon');
                }
                // 判断字母字符值
                var pwd = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/.test(pwdVal);
                if(pwd){
                    $('.ts-rule-multi i').html('&#10004').removeClass('ordinary-icon');
                } else{
                    $('.ts-rule-multi i').html('&#10006').removeClass('ordinary-icon');
                }

                var superPwd = /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{6,20}/.test(pwdVal);
                // 改变密码强弱图
                // 每执行一次，先返回原状态
                $('.ts-strength-bar span').css('background','#DCDCDC');
                $('.ts-strength-bar em').text('');
                if(superPwd){
                    $('.ts-strength-bar span').css('background','#0A9E00');
                    $('.ts-strength-bar em').css('color','#0A9E00').text('强');
                } else if((length && blank) || (length && pwd) || (blank && pwd)){
                    $('.ts-strength-bar span:lt(2)').css('background','#FF6A00');
                    $('.ts-strength-bar em').css('color','#0A9E00').text('中');
                } else if(length || blank || pwd){
                    $('.ts-strength-bar span:lt(1)').css('background','#FF460F');
                    $('.ts-strength-bar em').css('color','#FF460F').text('弱');
                }
            }
        });

        // 二次密码离开焦点事件
        $("#two-password").blur(function () {
            if($(this).val()!=$("#password").val()){
                ck2 = false;
                $(this).css('border','1px solid red');
                $("#error2-message").show();
                $("#msg2-text").text("两次输入的密码不一致！").css('color','red');
                $("#msg2-icon").removeClass("icon-round-yes").addClass("icon-round-error").css("color","red");
            } else{
                ck2 = true;
                $("#error2-message").hide();
                $(this).css('border','1px solid #dedede');
            }
        });

        // 提交该表单事件
        $("#fill-password").submit(function () {
            if(!(ck1 && ck2)){
                return false;
            }
        })
    });



</script>
</html>
